<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style>
		*{
		            margin: 0;
		            padding: 0;
		            list-style: none;
		        }
		        #view,#score{
		            width: 960px;
		            height: 540px;
		            margin: 100px auto;
		            position: relative;
		            overflow: hidden;
		        }
				#prev{
					position: absolute;
					width: 30px;
					height: 60px;
					color: white;
					background-color: rgba(0, 0, 0, .5);
					text-align: center;
					line-height: 60px;
					font-size: 20px;
					top: 50%;
					margin-top: -30px;
					cursor: pointer;
				}
				#next{
					position: absolute;
					width: 30px;
					height: 60px;
					color: white;
					background-color: rgba(0, 0, 0, .5);
					text-align: center;
					line-height: 60px;
					font-size: 20px;
					top: 50%;
					margin-top: -30px;
					right: 0px;
					cursor: pointer;
				}
				#prev:hover{
					background-color: rgba(0, 0, 0, 1);
				}
				#next:hover{
					background-color: rgba(0, 0, 0, 1);
				}
		        .container{
		            width: 100%;
		            height:540px;
		        }
		        .container li{
		            text-align: center;
		            background-color: skyblue;
		            width: 100%;
		            height: 540px;
		
		        }
				.container li img{
					width:100%;
					height: 100%;
				}
		        .Index{
	                position: absolute;
	                left: 50%;
	                bottom: 10px;
	                margin-left: -30px;
		        }
		        .Index li{
	                list-style: none;
	                float: left;
	                margin-right: 10px;
	                width: 10px;
	                height: 10px;
	                border-radius: 50%;
	                border: 1px solid #FFFFFF;
	                background: rgba(0,0,0,0.5);
	                cursor: pointer;
		
		        }
		        .Index .active{
		            background: #FFFFFF;
		        }
				h1{
					position: absolute;
					margin-top: -50px;
					margin-left: 45%;
					
					}
	</style>
	<body>
		<h1>悬停选对象</h1>
		<div id="view">
		        <ul class="container">
		            <li><img src="img/1.jpg" alt="" /></li>
		            <li><img src="img/2.jpg" alt="" /></li>
		            <li><img src="img/3.jpg" alt="" /></li>
		            <li><img src="img/4.jpg" alt="" /></li>
		            <li><img src="img/5.jpg" alt="" /></li>
		            <li><img src="img/6.jpg" alt="" /></li>
		            <li><img src="img/7.jpg" alt="" /></li>
		            <li><img src="img/8.jpg" alt="" /></li>
		        </ul>
		        <ul class="Index">
		            <li class="active"></li>
		            <li></li>
		            <li></li>
		            <li></li>
		            <li></li>
		            <li></li>
		            <li></li>
		            <li></li>
		        </ul>
			<span id="prev">&lt</span>
			<span id="next">&gt</span>
		    </div>
<script>
	window.onload=function () {
	            var L1 = new Slide("view");
	            L1.init();
	            L1.autoPlay(2000);
	
	            var L1 = new Slide("score");
	            L1.init();
	            L1.autoPlay(2000);
	        };
	
	        function Slide(id) {
	            this.view = document.getElementById(id);
				this.prev = document.getElementById('prev');
				this.next = document.getElementById('next');
	            this.container = this.view.getElementsByClassName("container")[0];
	            this.cBox = this.container.getElementsByTagName("li");
	            this.Index = this.view.getElementsByClassName("Index")[0];
	            this.iBox = this.Index.getElementsByTagName("li");
	            this.num = 0;
	            this.timer = null;
	        }
	
	        Slide.prototype.init = function() {
	            this.slide();
	            var This = this;
	            for(var j = 0;j < This.iBox.length;j++){
	                This.iBox[j].index = j;
	                This.iBox[j].onmouseover = function () {
	                    This.num = this.index;//1
	                    This.slide();
	                }
	            }
	
	            Slide.prototype.autoPlay = function (time) {
	                var This = this;	
	                This.timer = setInterval(function () {
	                    This.num++;
	                    This.slide();
	                },time);
	
	                This.view.onmouseover = function () {
	                    clearInterval(This.timer);
	                };
	                This.view.onmouseout = function () {
	                    This.timer = setInterval(function () {
	                        This.num++;
	                        This.slide();
	                    },time)
	                }
	            }
	next.onclick = function(time){
		console.log(222);
	                This.view.onmouseout = function () {
	                    This.timer = setInterval(function (time) {
	                        This.num++;
	                        This.slide();
	                    },50)

	}
}
	
	
	
	
	// next.onclick = function(){
	// 	console.log(222);
	//                   This.num++;
	//                   This.slide();
	// }
	// prev.onclick = function(){
	// 	console.log(222);
	// 		    This.num--;
	// 		    This.slide();
	
	// } 	
	        };
	
	        Slide.prototype.slide = function() {
	            if(this.num > this.cBox.length - 1){
	                this.num = 0;
	            }
	            if(this.num < 0){
	                this.num = this.cBox.length - 1;
	            }
	            for(var i = 0;i<this.cBox.length;i++){
	                this.cBox[i].style.display = "none";
	                this.iBox[i].className = "";
	            }
	            this.cBox[this.num].style.display = "block";
	            this.iBox[this.num].className = "active";
	        }

</script>
	</body>
</html>